<template>
  <el-table
      :data="props.data"
      @selection-change="getSelections"
  >
    <el-table-column
        v-if="tableType"
        :align="tableType.align"
        :width="tableType.width"
        :type="tableType.tableType"
    ></el-table-column>

    <template v-for="(item,index) in tableNoOperate" :key="index">
      <!--判断是否有插槽slot属性-->
      <el-table-column
          v-if="!item.slot"
          :label="item.label"
          :prop="item.prop"
          :align="item.align"
          :width="item.width"
      ></el-table-column>

      <el-table-column
          v-else
          :label="item.label"
          :prop="item.prop"
          :align="item.align"
          :width="item.width"
      >
        <!--自定义插槽-->
        <template #default="scope">
          <slot :name="item.slot" :scope="scope"></slot>
        </template>
      </el-table-column>
    </template>

    <el-table-column
        :label="tableOperate.label"
        :align="tableOperate.align"
        :width="tableOperate.width"
    >
      <!--按钮插槽-->
      <template #default="scope">
        <slot name="operate" :scope="scope"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">


import {tableOptions} from "./types";
import {computed, ComputedRef, PropType} from "vue";

const props = defineProps({
  options: {
    type: Array as PropType<tableOptions[]>,
    required: true
  },
  data: {
    type: Array as PropType<any[]>,
    required: true
  }
})
// 过滤操作选项
const tableNoOperate = computed(() => props.options.filter(item => !item.operate && !item.tableType))
// 找出操作选项
const tableOperate = computed(() => props.options.find(item => item.operate))
// 找出表格类型
const tableType = computed(() => props.options.find(item => item.tableType))

const emits = defineEmits(['selections'])
const getSelections = (val: any) => emits('selections', val)
</script>

<style scoped lang="scss">

</style>